<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				font-family: "微软雅黑";
				font-size: 14px;
			}
			
			input {
				font-size: 14px;
			}
			
			body,
			ul,
			div,
			html {
				padding: 0;
				margin: 0;
			}
			
			.hidden {
				display: none;
			}
			
			.main {
				width: 800px;
				margin: 0 auto;
			}
			
			li {
				list-style-type: none;
				line-height: 40px;
				position: relative;
				border: 1px solid transparent;
				padding: 0 20px;
			}
			
			li .status-span {
				display: block;
				width: 10px;
				height: 10px;
				background: #ccc;
				margin: 14px 10px 0 0;
				float: left;
			}
			
			li .status-span.status-end {
				background: #09f;
			}
			
			li .close {
				position: absolute;
				color: #f00;
				font-size: 20px;
				line-height: 40px;
				height: 40px;
				right: 20px;
				cursor: pointer;
				display: none;
				top: 0;
			}
			
			li:hover {
				border: 1px solid #09f;
			}
			
			li:hover .close {
				display: block;
			}
			
			li div {
				display: block;
			}
			
			li.eidting div {
				display: none;
			}
			
			li .text2 {
				height: 40px;
				padding-left: 10px;
				box-sizing: border-box;
				margin-left: 10px;
				width: 80%;
				display: none;
			}
			
			li.eidting .text2 {
				display: block;
			}
			
			li .text-keyword {
				height: 40px;
				padding-left: 10px;
				box-sizing: border-box;
				margin-left: 10px;
				width: 80%;
				display: none;
			}
			
			.text-keyword {
				box-sizing: border-box;
				width: 100%;
				height: 40px;
				padding-left: 10px;
				outline: none;
			}
		</style>
	</head>

	<body>
		<div id="app" class="main">
			<h2>小目标列表</h2>
			<div class="list">
				<h3>添加小目标</h3>
				<input type="text" class="text-keyword" placeholder="输入小目标后，按回车确认" @keyup.13='addList' v-model="addText" />
				<p>共有{{prolist.length}}个目标，{{noend==0?'全部完成了':'已完成了'+(prolist.length-noend)+'条商品 , 还有'+noend+'条未完成'}}</p>
				<p>
					<input type="radio" name="chooseType" checked="true" @click='chooseList(1)' /><label>所有目标</label>
					<input type="radio" name="chooseType" @click='chooseList(2)' /><label>已完成目标</label>
					<input type="radio" name="chooseType" @click='chooseList(3)' /><label>未完成目标</label>
				</p>
			</div>
			<ul>
				<li class="li1" v-for="(item,index) in newList">
					<div>
						<span class="status-span" @click="changeType(index)" :class="{'status-end':item.status}"></span>
						<span>{{item.name}}</span>
						<span class="close" @click='delectList(item)'>X</span>
					</div>
				</li>
			</ul>
		</div>
		<script src="js/vue2.5.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					addText: '',
					//name-名称,status-完成状态
					prolist: [{
							name: "html5",
							status: false
						},
						{
							name: "css3",
							status: false
						},
						{
							name: "vue",
							status: false
						},
						{
							name: "react",
							status: false
						}
					],
					newList: []
				},
				mounted(){
					this.newList = this.prolist;
				},
				computed:{
					noend:function(){
						return this.prolist.filter((item)=>{
							return !item.status
						}).length
					}
				},
				methods:{
//					目标分类
					chooseList:function(type){
						switch(type){
							case 1:
							     this.newList=this.prolist;
							     break;
							case 2:
							     this.newList=this.prolist.filter((item)=>{
							     	return item.status;
							     });
							     break;
							case 3:
							     this.newList=this.prolist.filter((item)=>{
							     	return !item.status;
							     });
							     break;     
						}
					},
//					删除当前
					delectList:function(item){
						var index = this.newList.indexOf(item);
						this.newList.splice(index,1);
					},
					changeType:function(index){
						this.newList[index].status=!this.newList[index].status;
					},
					addList:function(){
						this.prolist.push({
							name: this.addText,
							status: false
						})
						this.addText = '';
					}
				}
			})
		</script>
	</body>

</html>